<template>
	<view class="container">
		<!-- <view class="banner">
			<view 
				v-for="(item,index) in tabs" 
				:key="index" 
				class="item" 
				:class="currentTabs==index?'current':''"
				:style="'width:'+ 100 / tabs.length +'%;'"
				@click="onTabClick(index)"
			>
				<text>{{item.name}}</text>
				<text class="i">{{item.sub_name}}</text>
			</view>
		</view> -->
		
		<view class="list">
			<view v-for="(item, index) in tabs[currentTabs].list" :key="index" class="item" @click="onGoodClick(item, index)">
				<image :src="item.main_pic" mode="" class="pic"></image>
				
				<view class="cite">
					<text class="name">{{item.title}}</text>
					
					<view class="dfn">
						<view class="row progress">
							
						</view>
						
						<view class="price">
							<text class="i">￥</text>
							<text>{{item.itemfee_final}}</text>
							<text class="u">￥{{item.itemfee}}</text>
						</view>
						
						<view class="row mt4">
							<view class="lt">
								<view class="quan">
									<text>{{item.itemfee_coupon}}元券</text>
								</view>
								
								<view class="fan">
									<text>返{{item.commission_gift_card}}礼品券</text>
								</view>
							</view>
							
							<button type="primary" class="btn">马上抢</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="tabs[currentTabs].loadingMore ? 'loading' : ''"></uni-load-more>
		
	</view>
</template>

<script>
	import { runGetV6Data } from '@/module/api'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"

	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		components: {uniLoadMore},
		
		data() {
			return {
				tabs: [
					{
						name: '10:00',
						sub_name: '已开抢',
						loaded: false,
						page: 1,
						loadingMore: true,
						isEmpty: false,
						list: [],
					},
					{
						name: '12:00',
						sub_name: '已开抢',
						loaded: false,
						page: 1,
						loadingMore: true,
						isEmpty: false,
						list: [{},{}],
					},
					{
						name: '14:00',
						sub_name: '抢购中',
						loaded: false,
						page: 1,
						loadingMore: true,
						isEmpty: false,
						list: [{},{},{},{},{},{},{},{}],
					},
					{
						name: '16:00',
						sub_name: '即将开始',
						loaded: false,
						page: 1,
						loadingMore: true,
						isEmpty: false,
						list: [{},{}],
					},
					{
						name: '18:00',
						sub_name: '即将开始',
						loaded: false,
						page: 1,
						loadingMore: true,
						isEmpty: false,
						list: [{},{}],
					}
				],
				currentTabs: 0
			};
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		onReachBottom() {
			let _t = this
			let current = this.currentTabs
			let tab = this.tabs[current]
			
			if(!tab.loaded) return false
			if(tab.loadingMore) return false
			if(tab.isEmpty) return false
			
			tab.page++
			tab.loadingMore = true
			
			this.onPageRefresh()
		},
		
		onLoad() {
			this.onPageRefresh()
		},
		
		methods:{
			onPageRefresh () {
				let _t = this
				let current = this.currentTabs
				let tab = this.tabs[current]
				
				runGetV6Data({
					platform: 'jd',
					params: {
						act: 'search',
						is_pg: 1,
						youquan: 1,
						page: tab.page,
						uid: this.userInfo.id
					},
					success: res => {
						let list = tab.page == 1 ? [] : tab.list
							
						list = list.concat(res.data)
						
						tab.list = list
						tab.isEmpty = _.isEmpty(res.data)
						tab.loadingMore = false
						tab.loaded = true
					},
					fail: res => {
						tab.isEmpty = true
						tab.loadingMore = false
						tab.loaded = true
					},
					error: () => {
						tab.isEmpty = true
						tab.loadingMore = false
						tab.loaded = true
					}
				})
			},
			
			onTabClick (index) {
				this.currentTabs = index
			},
			
			onGoodClick (item, index){
				uni.navigateTo({
					url: "/pages/home/good-detail/good-detail?id=" + item.item_id + "&type=" + item.item_type
				})
			},
		}
	}
</script>

<style>
	page{
		background: #F2F2F2;
	}
</style>

<style lang="less">
	.banner{
		background: linear-gradient(180deg,rgba(255,87,87,1) 0%,rgba(255,40,61,1) 100%);
		height: 132px;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 1;
		
		.item{
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			text{
				color: #FF9FA5;
				font-size: 40px;
			}
			
			.i{
				font-size: 28px;
			}
			
			&.current{
				
				text{
					color: #FFFFFF;
					font-size: 50px;
				}
				
				.i{
					font-size: 28px;
				}
			}
		}
	}
	
	.list{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		padding-top: 30px;
		position: relative;
		overflow-x: hidden;
		
		&::before {  
			content: '';  
			width: 110%;  
			height: 80px;  
			position: absolute;  
			left: -5%; 
			top: 0;  
			z-index: -1; 
			border-radius: 0 0 50% 50%;  
			// background: rgba(255,40,61,1);
			background: #FF5757;
		}
		
		.item{
			width: 690px;
			height: 272px;
			background-color: #FFFFFF;
			border-radius: 12px;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20px;
			position: relative;
			
			.pic{
				height: 272px;
				width: 272px;
			}
			
			.cite{
				height: 272px;
				width: 418px;
				padding: 20px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.name{
					width: 100%;
					font-size: 28px;
					color: #333;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.dfn{
					width: 100%;
					
					.price{
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 100%;
						
						text{
							font-size: 32px;
							color: #FF3660;
						}
						
						.i{
							font-size: 24px;
							padding-top: 8px;
						}
						
						.u{
							font-size: 24px;
							padding-top: 8px;
							padding-left: 8px;
							text-decoration: line-through;
							color: #999999;
						}
					}
					
					.mt4{
						margin-top: 4px;
					}
					
					.row{
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						
						.lt{
							display: flex;
							flex-direction: row;
							align-items: center;
						}
						
						.btn{
							width: 106px;
							height: 44px;
							background:linear-gradient(180deg,rgba(255,102,102,1) 0%,rgba(255,30,77,1) 100%);
							border-radius: 22px;
							font-size: 26px;
							color: #FFFFFF;
							line-height: 44px;
						}
						
						.fan{
							background: #FFE4EA;
							padding: 0 10px;
							height: 36px;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-left: 12px;
							border-radius: 6px;
							
							text{
								font-size: 22px;
								color: #FF3660;
							}
						}
						
						.quan{
							background: #FFC42A;
							padding: 0 10px;
							height: 36px;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							
							&::after{
								content: "";
								display: block;
								width: 10px;
								height: 100%;
								position: absolute;
								top: 0;
								right: 0;
								background: #FFFFFF url("../../../static/fanli/311.png") right center no-repeat;
								background-size: cover;
							}
							
							&::before{
								content: "";
								display: block;
								width: 10px;
								height: 100%;
								position: absolute;
								top: 0;
								left: 0;
								background: #FFFFFF url("../../../static/fanli/311.png") left center no-repeat;
								background-size: cover;
							}
							
							text{
								font-size: 22px;
								color: #FFFFFF;
							}
						}
					}
					
					.progress{
						justify-content: flex-start;
						margin-bottom: 20px;
						
						.line{
							width: 226px;
							height: 24px;
							background: rgba(255,228,234,1);
							border-radius: 12px;
							overflow: hidden;
							position: relative;
							
							.num{
								position: absolute;
								top: 0;
								right: 10px;
								line-height: 24px;
								font-size: 18px;
								color: #FF3660;
							}
							
							.inner{
								width: 200px;
								height: 100%;
								background: #FF3660;
								border-radius: 12px;
								overflow: hidden;
								
								.con{
									width: 226px;
									height: 100%;
									position: relative;
								}
								
								.num{
									color: #FFFFFF;
								}
							}
						}
						
						.u{
							font-size: 18px;
							color: #999999;
							margin-left: 10px;
						}
					}
				}
			}
		}
	}
</style>
